<template>
  <div v-loading="loading" class="app-container">
    <el-col :span="22" :offset="1">
      <el-row>
        <el-col
          :span="1"
          style="width: 62px; height: 62px; background-color: rgb(224, 242, 241); border-radius: 10px; align-self: center; font-size: 31px; text-align: center; line-height: 62px;"
        >{{ detail.name | filterFlag }}</el-col>
        <el-col :span="10" style="padding-left:15px;padding-top:15px;">
          <span style="color: #20a0ff;font-size: 20px; margin-right:10px;">{{ detail.name }}</span>
          <el-tag
            size="small"
            :type="detail.visibility | filterVisibilityType"
          >{{ detail.visibility | filterVisibility }}</el-tag>
        </el-col>
        <el-col :span="12">
          <el-button
            style="margin-top:30px;float: right"
            type="success"
            size="small"
            @click="outerVisible = true"
          >新建子组</el-button>
        </el-col>
      </el-row>
      <el-row style="margin-top:10px;">
        <el-tabs v-model="activeName">
          <el-tab-pane label="子组" name="sub">
            <el-table :data="subGroups" style="width: 100%" :show-header="false">
              <el-table-column>
                <template slot-scope="{row}">
                  <i class="el-icon-s-flag" />
                  <span class="cursor" @click="groupDetail(row.id)">
                    <strong>{{ row.name }}</strong>
                  </span>
                  <el-tag
                    size="small"
                    :type="row.visibility | filterVisibilityType"
                  >{{ row.visibility | filterVisibility }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot-scope="{row}">
                  <el-button-group class="action">
                    <el-button
                      size="mini"
                      type="primary"
                      icon="el-icon-edit"
                      @click="editGroup(row.id)"
                    />
                    <el-button
                      size="mini"
                      type="danger"
                      icon="el-icon-delete"
                      @click="deleteGroup(row.id)"
                    />
                  </el-button-group>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="项目" name="project">
            <el-table :data="detail.projects" style="width: 100%" :show-header="false">
              <el-table-column prop="name">
                <template slot-scope="{row}">
                  <el-link :underline="false" @click="toProject(row)">
                    <i class="el-icon-s-flag" />
                    {{ row.name }}
                  </el-link>
                  <el-tag
                    size="small"
                    :type="row.visibility | filterVisibilityType"
                  >{{ row.visibility | filterVisibility }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot-scope="{row}">
                  <div class="action">
                    <el-link :underline="false" type="warning">{{ row.created_at | filterTime }}</el-link>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="分享项目" name="share">
            <el-table :data="detail.shared_projects" style="width: 100%" :show-header="false">
              <el-table-column prop="name">
                <template slot-scope="{row}">
                  <el-link :underline="false" @click="toProject(row)">
                    <i class="el-icon-s-flag" />
                    {{ row.name }}
                  </el-link>
                  <el-tag
                    size="small"
                    :type="row.visibility | filterVisibilityType"
                  >{{ row.visibility | filterVisibility }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot-scope="{row}">
                  <div class="action">
                    <el-link :underline="false" type="warning">{{ row.created_at | filterTime }}</el-link>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </el-col>
    <el-dialog title="新建群组" :visible.sync="outerVisible">
      <div>
        <el-form ref="addForm" :rules="rules" label-position="top" :model="addForm">
          <el-form-item label="群组名称" prop="name">
            <el-input v-model="addForm.name" />
          </el-form-item>
          <el-form-item label="群组URL" prop="path">
            <el-input v-model="addForm.path">
              <template slot="prepend">{{ gitServer }}</template>
            </el-input>
          </el-form-item>
          <el-form-item label="群组描述" prop="desc">
            <el-input v-model="addForm.desc" type="textarea" rows="4" />
          </el-form-item>
          <el-form-item label="可见性级别" prop="visibility">
            <el-radio-group v-model="addForm.visibility">
              <el-tooltip class="item" effect="dark" content="该群组和其项目只有其成员能以看到。" placement="top">
                <el-radio label="private">私有</el-radio>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="该群组和其内部项目只有已登录用户能看到" placement="top">
                <el-radio label="internal">内部</el-radio>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" :content="publicContent" placement="top">
                <el-radio label="public" :disabled="!allowPublic">公开</el-radio>
              </el-tooltip>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="success" @click="createGroup">创建群组</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getData, postData } from '@/api/requestData';
import { handleTimeDuration } from '@/utils/index';

export default {
  components: {},
  filters: {
    filterVisibility(type) {
      const visMap = {
        private: '私有',
        public: '公开',
        internal: '内部'
      };
      return visMap[type];
    },
    filterVisibilityType(type) {
      const typeMap = {
        private: 'danger',
        public: 'success',
        internal: 'warning'
      };
      return typeMap[type];
    },
    filterTime(time) {
      return handleTimeDuration(time);
    },
    filterFlag(name) {
      return name[0];
    }
  },
  data() {
    return {
      groupId: 0,
      loading: true,
      activeName: 'sub',
      detail: {
        name: '',
        visibility: '',
        projects: [],
        shared_projects: []
      },
      subGroups: [],
      outerVisible: false, // dialog是否展示
      addForm: {
        name: '',
        path: '',
        desc: '',
        visibility: 'private',
        parentId: 0
      },
      rules: {
        name: [
          { required: true, message: '群组名称不能为空', trigger: 'blur' }
        ],
        path: [{ required: true, message: '群组url不能为空', trigger: 'blur' }]
      },
      gitServer: '',
      allowPublic: true,
      publicContent: '该群组和其公开项目可以被任何授权的用户看到。'
    };
  },
  watch: {
    'addForm.name': function(val) {
      this.addForm.path = val;
    }
  },
  created() {
    this.groupId = this.$route.params.groupId;
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.loading = true;
      getData('/git/group/detail/' + this.groupId).then((response) => {
        console.log(response);
        this.detail = response.data.detail;
        this.subGroups = response.data.subGroups;
        this.gitServer = response.data.gitServer + this.detail.full_path + '/';
        this.addForm.parentId = response.data.detail.id;
        const visibility = this.detail.visibility;
        if (visibility === 'internal' || visibility === 'private') {
          this.allowPublic = false;
          this.publicContent = '父级群组为私有或内部可访问,子组无法设置为公开';
        }
        this.loading = false;
      });
    },
    toProject(row) {
      this.$router.push({
        path: '/git/code/' + row.id + '/' + row.name + '/master/root'
      });
    },
    createGroup() {
      postData('/git/create/group', this.addForm).then((response) => {
        this.outerVisible = false;
        this.$message.success(response.message);
        this.fetchData();
      });
    },
    deleteGroup(groupId) {
      this.$confirm(
        '删除群组将删除群组及所有子组且无法恢复,确认删除?',
        '提示',
        {
          type: 'warning'
        }
      )
        .then(() => {
          getData('/git/delete/group/' + groupId).then((response) => {
            this.$message.success(response.message);
            this.fetchData();
          });
        })
        .catch(() => {
          this.$message.info('取消删除');
        });
    },
    editGroup(groupId) {
      this.$router.push({ path: '/git/group/edit/' + groupId });
    },
    groupDetail(groupId) {
      this.$router.push({ path: '/git/group/detail/' + groupId });
    }
  }
};
</script>

<style>
.cursor:hover {
  cursor: pointer;
}
</style>
<style scoped>
.action {
  float: right;
}
</style>
